<template>
  <div class="ms-1 overflow-auto flex-auto bg-white relative">
    <v-tabs @change="onTabChange" v-model="tabActive" class="shrink-0 grow-0">
      <v-tab>预览</v-tab>
      <v-tab>编辑</v-tab>
      <v-tab>运行</v-tab>
      <v-tab>用例</v-tab>
    </v-tabs>
    <prev-component v-if="inited" v-show="tabActive === 0" />
    <edit-component v-if="inited" v-show="tabActive === 1" />
    <run-component ref="runComp" v-if="inited && tabActive === 2" />
    <instance-component
      @exec="onExecInstance"
      v-if="inited && tabActive === 3"
    />
  </div>
</template>

<script>
import { nextTick, ref } from "@vue/composition-api";
import router from "@/router";
import { useApiStore } from "@/store/api";
import PrevComponent from "./children/prev/index.vue";
import EditComponent from "./children/edit/index.vue";
import RunComponent from "./children/run/index.vue";
import InstanceComponent from "./children/instance/index.vue";
export default {
  components: {
    PrevComponent,
    EditComponent,
    RunComponent,
    InstanceComponent,
  },
  setup() {
    const apiStore = useApiStore();
    const tab = apiStore.tabList.find(
      (item) => item.key === 1 + "" + apiStore.docId
    );
    if (tab) {
    }
    const inited = ref(false);
    apiStore.fetchDoc().then(() => {
      inited.value = true;
    });
    const tabActive = ref(0);
    function onTabChange(val) {
      // if (val === 0) {
      //   apiStore.routerReplace("api-detail-prev");
      // } else if (val === 1) {
      //   apiStore.routerReplace("api-detail-edit");
      // } else if (val === 2) {
      //   apiStore.routerReplace("api-detail-run");
      // }
    }

    const runComp = ref(null);

    function onExecInstance(row) {
      tabActive.value = 2;
      nextTick(() => {
        instance.value = row;
        runComp.value.setInstance(row);
      });
    }

    const instance = ref(null);

    return {
      runComp,
      inited,
      tabActive,
      onTabChange,
      apiStore,
      instance,
      onExecInstance,
    };
  },
  beforeRouteUpdate(to, from, next) {
    // if (to.name === "api-detail") {
    //   return this.apiStore.fetchDoc().then(() => {
    //     next();
    //   });
    // }
    const tab = this.apiStore.tabList.find(
      (item) => item.key === 1 + "" + from.query.docId
    );
    if (tab) {
      tab.doc = this.apiStore.doc;
    }
    next();
  },
};
</script>

<style scoped>
</style>